<!-- 球形echarts -->
<template>
  <div :id="id" style="height: 208px; margin: 0 auto"></div>
</template>

<script>
// import echarts from 'echarts'
//  这里要改成下面的格式，不改会报
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'BallChart',
  props: {
    // 数据
    data: {
      type: Array,
      required: true
    },
    // 选择器
    id: {
      type: String,
      required: true
    },
    // 球和球之间的横向间隔距离
    xDistance: {
      type: Number,
      required: true
    }
  },
  mounted() {},
  methods: {
    initial() {
      const { data, id, xDistance } = this._props
      const myChart = echarts.init(document.getElementById(id))
      const series = []
      data.forEach((item, index) => {
        console.log('我是。。。', item.otherColor)
        series.push({
          type: 'liquidFill', // 设置图表类型
          radius: '60%', // 设置图的大小
          center: [`${xDistance * (index + 0.5)}%`, '45%'],
          animationDuration: 0,
          animationDurationUpdate: 2000,
          animationEasingUpdate: 'cubicOut',
          data: [
            {
              // NOTE 为了扩大鼠标悬浮热区 tooltip展示
              value: 1,
              itemStyle: {
                color: 'transparent' // 背景颜色
              }
            },
            item.value / 100 // 设置水位，值为0到1之间
          ],

          // outline: {
          //   borderDistance: 4, // 外边框距离
          //   itemStyle: {
          //     borderWidth: 2, // 外边框宽度
          //     borderColor: '#156ACF' // 外边框颜色
          //   }
          // },
          backgroundStyle: {
            color: `${item.otherColor}`
            // color: [item.otherColor]
          },
          color: [item.color],
          itemStyle: {
            shadowColor: 'transparent'
          },
          outline: {
            borderDistance: 5,
            itemStyle: {
              borderWidth: 1,
              borderColor: item.color
            }
          },
          label: {
            position: ['50%', '50%'],
            formatter: () => {
              return `${item.value}%`
            },
            textStyle: {
              fontSize: 24,
              color: '#20232A' // 字体颜色
            },
            fontWeight: 'normal'
          },
          textStyle: {
            color: '#4B0082' // 这里设置字体颜色为白色
          }
          // label: {
          //   normal: {
          //     textStyle: {
          //       color: '#156ACF', // 标签文本颜色
          //       insideColor: '#fff',
          //       fontSize: 40
          //     }
          //   }
          // }
        })
      })

      var option = {
        series: series
      }

      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#ballChart {
  ::v-deep div {
    cursor: default !important;
  }
}
#ballChartIng {
  ::v-deep div {
    cursor: default !important;
  }
}
</style>
